<!-- 收货方扫描签收的图片确认列表 -->
<template>
  <div class="gridContainer">
    <div class="m-det-warp mb30">
      <div class="m-det-tit">业务单号：{{data.BbMain.BBillNo}}</div>
      <div class="m-det-list">
        <ul class="m-det-ul">
          <li class="displayflex">
            <span class="label">制单时间</span>
            <div class="flex1 value">{{data.BbMain.InputDate | time}}</div>
          </li>
          <li class="displayflex">
            <span class="label">司机</span>
            <div class="flex1 value">{{data.Vehicle.Driver1Name}}</div>
          </li>
          <li class="displayflex">
            <span class="label">司机电话</span>
            <div class="flex1 value">{{data.Vehicle.Driver1Tel}}</div>
          </li>
        </ul>
        <!-- <div class="txt-wrap">
          <textarea v-model="Memo" placeholder="备注"></textarea>
        </div>  -->
      </div>
    </div>

    <uploader :title="'回执单上传'" :img-list="imgList" :max="9"></uploader>

    <div class="m-form-wrap">
        <div class="m-form-box">
          <span class="txt">交货人</span>
          <div class="m-form-ipt"><input type="text" v-model="signName"></div>
        </div>
        <div class="m-form-box"> 
            <span class="txt">备注</span>
            <div class="m-form-ipt">
                <textarea type="text" placeholder="请输入备注信息" v-model="Memo" ></textarea>
            </div>
        </div>
    </div>
    <div class="w100fix"></div>
    <div class="checknum-bot displayflex">
      <div class="num">共<em class="red">{{totalNum}}</em>件商品</div>
      <div class="flex1">
        <ul class="cf cn-btn-grp f-r">
          <li class="btn-checknum f-l cancel" @click="backLink()">取消</li>
          <li class="btn-checknum f-l" @click="Confirm()">交货确认</li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import uploader from '@/components/share/imageUploader/imageUploader.vue';

export default {
  components: {
      uploader,
  },
  data: function() {
    return {
      reasonList: [
        ['请选择']
      ],
      data: {
        BbMain:{},
        Vehicle: {},
      },
      goodslist: [],

      imgList: [],

      guid: "",
      Memo: "",
      ReceiverID: "",
      ReceiverName: "",
      PRContactsTel: "",

      totalNum: 0,
      checkedName: "",
      reason: [],
      curHos: "",
      Carrierlist: [],
      showHos: false,
      signName:'',
    };
  },
  computed: {
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null; 
    }
  },
  created() {
    this.getData();
    // this.getRefusalreasonData();
  },
  beforeDestroy() {
    sessionStorage.removeItem('goodslist');
    sessionStorage.removeItem('orderlist');
  },
  methods: {
    getData() {
      if(!sessionStorage.goodslist || !sessionStorage.orderlist){
          let self = this;
          this.$vux.toast.show({
            text: '数据已过期<br>请重试',
            type: 'cancel',
            onHide () {
              self.$router.go(-1)
            }
          });
      } else {
        this.ReceiverID = this.userinfo.StaffID;
        this.ReceiverName = this.userinfo.Name;
        this.PRContactsTel = this.userinfo.MobileNo;
        this.signName = this.userinfo.Name;

        this.goodslist = JSON.parse(sessionStorage.goodslist);
        this.data = JSON.parse(sessionStorage.orderlist);

        this.goodslist.forEach(x => {
          this.totalNum += x.ConPKGS;
        });
      }
    },


    Confirm() {
      let imgList = [];
        this.imgList.forEach((x) => {
        let item = x.split(',')[1];
        imgList.push(item);
      })

      let query = {
        GUID: this.data.Vehicle.Guid,
        imgurla: imgList,
        PKGS: this.data.BbMain.Pkgs,
        Weight: this.data.BbMain.Weight,
        Volumn: this.data.BbMain.Volume,
        RowNo: this.data.VehicleDetail[0].RowNo,
        Memo: this.Memo,
        Receiver: this.ReceiverID,
        ReceiverName: this.signName,
        PRContactsTel: this.PRContactsTel,
        goodslist: this.goodslist,
        type: '1'
      };

      this.Ajax.post("CarrierHandover", query).then((res) => {
        if (res.IsSuccess) {
          this.Toast({
            message: "确认成功"
          });
          this.$router.push({
            path: "/carrier/handoverlist"
          });
        } else {
          this.Toast({
            message: res.ErrorMessage || '出现错误，请刷新重试',
          });
        }
      }).catch(e => {
        console.log(e);
        this.Toast({
          message: '出现错误，请刷新重试',
        })
      });
    },

    backLink(){
       this.$router.push({
        path:'handoverlist'
       })
    }
  },
};
</script>